<template>
    <div>
        <el-form :inline="true" :model="foodName" class="demo-form-inline">
        <el-form-item label="菜品名称">
          <el-input v-model="foodName" placeholder="菜品名称" clearable />
          <el-button type="primary" @click="getPage">搜索</el-button>
        </el-form-item>
      </el-form>
      <br/>
      <el-table :data="foodList" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="foodName" label="菜品名称"  />
          <el-table-column  label="菜品图片"  >
            <template #default="scope">
              <img :src="scope.row.foodImg" width="50" height="50" />
            </template>
          </el-table-column>
          <el-table-column prop="foodPrice" label="菜品价格"  />
          <el-table-column prop="categoryName" label="菜品分类"  />
          <el-table-column prop="stock" label="库存数量"  />
          <el-table-column prop="status" label="菜品状态"  />
          <el-table-column prop="foodExplain" label="菜品介绍"  />
          <el-table-column prop="recommend" label="推荐优先级"  />
          <el-table-column prop="hot" label="热销推荐"  />
          <el-table-column  label="操作" >
    
            <template #default="scope">
                <el-button
            size="small"
            :type="scope.row.hot == 0 ? 'primary' : 'danger'" 
            @click="hot(scope.row)"
          >
          {{ scope.row.hot == 0 ? '热销推荐' : '热销取消' }}
                </el-button>
            </template>
          </el-table-column>
        </el-table>
    
        <el-divider />
        <br/>
    
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[2, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        </div>   
         
    </template>
    
    <script setup>
    import { reactive,ref } from 'vue';
    import { ElMessage ,ElMessageBox} from 'element-plus';
    import { onBeforeMount } from 'vue';
    import apiFood from '../../api/Food/Food';
import axios from 'axios';
    const foodName = ref('');
    const foodList = ref([]);
    const total = ref(0);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const food=reactive({});
    const categoryList=ref([]);
    const getPage=()=>{
        const param={
          foodName:foodName.value,
          pageNum:currentPage.value,
          pageSize:pageSize.value,
          shopId:''
        }
        console.log(param);
        apiFood.pageSelectFood(param)
        .then(response=>{
          foodList.value=response.data.list;
          total.value=response.data.totalCount;
        })
        .catch(error=>{
          console.log(error);
        })
    }
    const hot=(row)=>{
        axios.put('http://localhost:7444/foods/hotFood',row)
          .then(response=>{
            ElMessage({
              message: '推荐成功',
            })
            getPage();
          })
    }

    const handleSizeChange=(val)=>{
      pageSize.value=val;
      getPage();
    }
    const handleCurrentChange=(val)=>{
      currentPage.value=val;
      getPage();
    }
    
    onBeforeMount(()=>{
      getPage();
    })
    </script>
    
    <style lang="scss" scoped>
    
    </style>